<!--
 * @Author: your name
 * @Date: 2021-05-28 11:37:22
 * @LastEditTime: 2021-06-04 19:16:13
 * @LastEditors: YaoXiaoTian
 * @Description: In User Settings Edit
 * @FilePath: \tourismpc\src\views\panda\components\headlines\detail\Detail.vue
-->
<template>
  <div class="headlinedetail">
    <h4 style="color: #333333; text-align: center">
      {{ detail.titleName }}
    </h4>
    <div class="heder">
      <div class="name">{{ detail.publisherName }}</div>
      <div class="time">发表于{{ detail.pandaTime }}</div>
    </div>
    <div class="text">
      <p>{{ detail.pandaInfo1 }}</p>
      <el-image :src="detail.infoImgUrl"></el-image>
      <p>{{ detail.pandaInfo2 }}</p>
    </div>
    <div
      class="nextPage"
      v-if="detail.nextPandaId"
      @click="nextContent(detail.nextPandaId)"
    >
      下一页：{{ detail.nextPandaName }}
    </div>
    <div class="comment">
      <Comment
        :content="detail.pandaReviewsList"
        :productId="pandaId"
        :type="2"
      />
    </div>
  </div>
</template>

<script>
import Comment from "../../../../../components/comment/index";
export default {
  data() {
    return {
      pandaId: null,
      detail: {},
      geocoder: null,
      marker: null,
      address: "",
      coordinate: {
        longitude: 104.07,
        latitude: 30.67,
      },
    };
  },
  components: {
    Comment,
  },
  watch: {
    $route: {
      handler() {
        this.id = this.$route.query.id;
        this.getPandaInfo();
        //深度监听，同时也可监听到param参数变化
      },
      deep: true,
    },
  },
  mounted() {
    this.pandaId = this.$route.query.id;
    this.getPandaInfo();
  },
  methods: {
    getPandaInfo() {
      this.$http
        .fetch(this.$apiPath.getPandaInfo, {
          method: "get",
          params: {
            pandaId: this.pandaId,
          },
        })
        .then((res) => {
          this.detail = res.data;
        });
    },
    nextContent(pandaId) {
      this.$route.query.pandaId = pandaId;
    },
  },
};
</script>

<style lang="less">
.headlinedetail {
  width: 1220px;
  margin: 0 auto;
  .heder {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 300px;
    margin: 0 auto;
    margin-top: 18px;
    margin-bottom: 100px;
    .userAvatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
    .name {
      //   margin-left: -20px;
    }
    .time {
      color: #999999;
      font-size: 14px;
    }
  }
  .text {
    color: #666666;
    margin-bottom: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      width: 1200px;
      font-size: 16px;
      font-weight: 300;
      color: #666666;
      line-height: 30px;
      text-indent: 2em;
      margin: 50px 0;
    }
    /deep/ .el-image {
      max-width: 1200px;
    }
  }
  .titleText {
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 8px;
  }
  .el-input-group {
    width: 400px;
    .el-input-group__append {
      background-color: #cf975a;
      .el-icon-search {
        color: #fff;
      }
    }
  }

  .nextPage {
    margin: 0 auto;
    color: #666666;
    text-align: center;
    margin-top: 39px;
    margin-bottom: 50px;
    cursor: pointer;
  }
}
</style>
